<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片审查 - 贵州省先进计算全省重点实验室</title>

    {% load static %}
    <link rel="stylesheet" href="{% static 'css/picture.css' %}">
</head>
<body>
<div class="header"
     style="height: 80px; width: 100%; background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-bottom: 1px solid rgba(74,85,104,0.1);">
    {% load static %}
{#    <img src="{% static '/img/a_02.gif' %}" alt="实验室图片" style="height: 80px; width: 700px;">#}
    <h1 style="position: absolute; left: 50px;">贵州省先进计算全省重点实验室</h1>
</div>

<div class="main-container">
    <div class="breadcrumb">
        <a href="/index">首页</a> > <span>图片分析</span>
    </div>

    <h1 class="page-title">
        <span>🔍</span>
        图片分析
    </h1>

    <div class="content-grid">
        <!-- 左侧：图片上传区域 -->
        <div class="upload-section">
            <h2 class="section-title">
                <span>📷</span>
                图片上传
            </h2>

            <div style="position: relative;">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-icon">📸</div>
                        <div class="upload-text">点击选择图片或拖拽到此处</div>
                        <div class="upload-hint">支持 JPG、PNG、GIF 格式，最大 10MB</div>
                        <input type="file" id="imageInput" name="image" class="file-input" accept="image/*">
                    </div>
                </form>

                <!-- 上传后的覆盖界面 -->
                <div class="upload-overlay" id="uploadOverlay">
                    <div class="uploaded-preview">
                        <img id="uploadedImg" alt="已上传图片">
                        <div class="uploaded-info">
                            <div class="info-item">
                                <span class="info-label">上传状态:</span>
                                <span class="info-value" style="color: #2f855a;">✅ 上传成功</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <button type="button" class="btn btn-primary" id="analyzeBtn" disabled>
                    <span>🔍</span>
                    开始分析
                </button>
                <button type="button" class="btn btn-secondary" id="resetBtn">
                    <span>🔄</span>
                    重新选择
                </button>
            </div>

            <div id="errorMessage" class="error-message"></div>
            <div id="successMessage" class="success-message"></div>
        </div>

        <!-- 右侧：分析结果区域 -->
        <div class="analysis-section">
            <h2 class="section-title">
                <span>📊</span>
                分析结果
            </h2>

            <div class="analysis-placeholder" id="analysisPlaceholder">
                <div style="font-size: 48px; margin-bottom: 20px;">📋</div>
                <p>请先上传图片，然后点击"开始分析"按钮</p>
            </div>

            <div class="loading" id="loadingState">
                <div class="loading-spinner"></div>
                <p>正在分析图片内容，请稍候...</p>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
            </div>

            <div class="analysis-result" id="analysisResult">
                <!-- 分析结果将在这里动态显示 -->
            </div>
        </div>
    </div>
</div>

<div class="footer">
    © 2025 贵州省先进计算全省重点实验室 版权所有
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
{% load static %}
<script src="{% static 'js/picture.js' %}"></script>
</body>
</html>